﻿@model Client
@{
    ViewBag.Title = Model.FirstName + " " + Model.LastName;
    List<WeddingEventManagementApp.Models.ClientDetailInvoice_VM> invoices = ViewBag.invoices;
}

<div id="client-details" class="twelve columns">
    <div class="row">
        <div class="two columns mobile-four text-center ">
            <img class="profile-image" src="@string.Format(@"https://www.gravatar.com/avatar/{0}?s={1}&d=identicon", ViewBag.Gravatar, 125)">
        </div>
        <div class="seven columns">
            <h2>@Model.FirstName @Model.LastName</h2>

            @if (String.IsNullOrEmpty(Model.City))
            {
                if (string.IsNullOrEmpty(Model.Provence))
                {
                <h4>Location Unknown</h4>
                }
                else
                {
                <h4>@Model.Provence</h4>
                }
            }
            else
            {
                if (string.IsNullOrEmpty(Model.Provence))
                {
                <h4>@Model.City</h4>
                }
                else
                {
                <h4>@Model.City, @Model.Provence</h4>
                }
            }
        </div>
        <div class="three column mobile-four right">
            <div class="row">
                <span class="six column mobile-four text-right">
                    @Html.ActionLink("Edit", "Edit", new { id = Model.ClientID }, new { @class = "button secondary radius" })
                </span>

                <span id="form-container" class="mobile-four six column">
                    @using (Html.BeginForm("Delete", "Client", new { id = Model.ClientID }, FormMethod.Post))
                    {
                        <input type="submit" class="button alert radius" value="Delete" />
                    }
                </span>
            </div>
        </div>
    </div>

    <div class="row">

        <div class="twelve columns">

            <dl class="mobile tabs">
                <dd class="active"><a href="#tab1">Client Details</a></dd>
                <dd><a href="#tab2">Events</a></dd>
                <dd><a href="#tab3">Invoices</a></dd>
                <dd><a href="#tab4">System Details</a></dd>
            </dl>

            <ul class="tabs-content">
                <li id="tab1Tab" class="active twelve column">

                    <div class="form-row row">
                        <i class="one mobile-one column icon-mail form-icon"></i>
                        <h5 class="eleven mobile-three column"><a href="mailto:@Model.Email" target="_blank">@Model.Email</a></h5>
                    </div>

                    <div class="form-row row">
                        <i class="one mobile-one column icon-phone form-icon"></i>

                        <div class="eleven mobile-three column">
                            @if (Model.ClientPhones.Count > 0)
                            {
                                Html.RenderPartial("ClientDetails/_ClientPhones", Model.ClientPhones);
                            }
                        </div>
                    </div>

                    <div class="form-row row">
                        <i class="one mobile-one column icon-location form-icon"></i>
                        @if (String.IsNullOrEmpty(Model.Address))
                        {
                            <h5 class="eleven mobile-three column"><a href="http://maps.google.com/?q=@Model.Address @Model.City @Model.Provence @Model.PostalCode" target="_blank">@Model.Address @Model.City @Model.Provence @Model.PostalCode</a></h5>
                        }
                        else
                        {
                            <h5 class="eleven mobile-three column"><a href="http://maps.google.com/?q=@Model.Address @Model.City @Model.Provence @Model.PostalCode" target="_blank">@Model.Address
                                <br>
                                @Model.City, @Model.Provence @Model.PostalCode</a></h5>
                        }

                    </div>

                    <div class="form-row row">
                        <i class="one mobile-one column icon-pencil form-icon"></i>
                        <h5 class="eleven mobile-three column">@Html.Raw(Html.Encode(Model.Notes).Replace("\n", "<br />"))</h5>
                    </div>
                </li>
                <li id="tab2Tab" class="twelve column">

                    @if (Model.Events.Count() > 0)
                    {
                        
                        <h5>Upcoming Events</h5>

                        if (Model.Events.Where(w => w.StartDate >= DateTime.UtcNow).Count() > 0)
                        {
                            <table cellspacing="0" cellpadding="0" class="table">
	                        <thead>
	                        <tr>
		                        <th class="xlarge">Title</th>
		                        <th class="large">Date</th>
		                        <th class="small">Time</th>
                                <th class="small">Type</th>
                                <th class="small"></th>
	                        </tr>
	                        </thead>
	                        <tbody>

                            @foreach (var evt in @Model.Events.Where(w => w.StartDate >= DateTime.UtcNow))
                            {
                                <tr>
		                        <td>@evt.Title</td>
		                        <td>@evt.StartDate.ToLongDateString()</td>
		                        <td>@evt.StartDate.ToShortTimeString()</td>
                                <td>@evt.EventType.EventTypeName</td>
                                <td>@Html.ActionLink("View", "Details", "Event", new { id = evt.EventID }, new { @class = "k-button k-button-icontext" })</td>
	                            </tr>
                            }
                            </tbody>
                        </table>
                        }
                        else
                        {
                            <p>No Upcoming Events</p>
                        }

                        <h5>Past Events</h5>

                        if (Model.Events.Where(w => w.StartDate < DateTime.UtcNow).Count() > 0)
                        {
                        <table cellspacing="0" cellpadding="0" class="table">
	                    <thead>
	                    <tr>
		                    <th class="xlarge">Title</th>
		                    <th class="large">Date</th>
		                    <th class="small">Time</th>
                            <th class="small">Type</th>
                            <th class="small"></th>
	                    </tr>
	                    </thead>
	                    <tbody>

                        @foreach (var evt in @Model.Events.Where(w => w.StartDate < DateTime.UtcNow))
                        {
                            <tr>
		                        <td>@evt.Title</td>
		                        <td>@evt.StartDate.ToLongDateString()</td>
		                        <td>@evt.StartDate.ToShortTimeString()</td>
                                <td>@evt.EventType.EventTypeName</td>
                                <td>@Html.ActionLink("View", "Details", "Event", new { id = evt.EventID }, new { @class = "k-button k-button-icontext" })</td>
	                        </tr>
                        }
                            </tbody>
                    </table>
                        }
                        else
                        {
                            <p>No Past Events</p>
                        }
                        
                    }
                    else
                    {
                        <p>No Events have been added for this client!</p>
                    }

                </li>
                <li id="tab3Tab" class="twelve column">

                    @{ var uninvoicedEvents = Model.Events.Where(i => i.Invoices.Count() == 0); }

                    @if (uninvoicedEvents.Count() > 0)
                    {
                        Html.RenderPartial("ClientDetails/_UninvoicedEvents", uninvoicedEvents);
                    }
                    
                    @if (invoices.Count() > 0)
                    {
                        Html.RenderPartial("ClientDetails/_ActiveInvoices", invoices);
                    }
                </li>
                <li id="tab4Tab" class="twelve column">
                    <div class="form-row row">
                        <h5 class="three column"><strong class="item-label">Status: </strong></h5>
                        <h5 class="nine column">Active</h5>
                    </div>
                    <div class="form-row row">
                        <h5 class="three column"><strong class="item-label">Created On: </strong></h5>
                        <h5 class="nine column">@Model.DateCreated.ToString()</h5>
                    </div>
                    <div class="form-row row">
                        <h5 class="three column"><strong class="item-label">Last Updated: </strong></h5>
                        <h5 class="nine column">@(Model.LastUpdated.HasValue ? Model.LastUpdated.Value.ToString() : "Not Updated Yet")</h5>
                    </div>
                    <div class="form-row row">
                        <h5 class="three column"><strong class="item-label">Created By: </strong></h5>
                        <h5 class="nine column">@ViewBag.CreatorUserName</h5>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    @Html.HiddenFor(model => model.ClientID, new { id = "hdnClientID" })
</div>

@section Scripts {
    <div id="add-payment" class="reveal-modal">
        @{Html.RenderPartial("_AddPayment", new WeddingEventManagementApp.Models.Payment_VM());}
        <a class="close-reveal-modal">&#215;</a>
    </div>
    <div id="view-payments" class="reveal-modal">
        <h3>Payments for <span id="view-pay-evt-title"></span></h3>

        <div id="view-payments-content">
            <table>
                <thead>
                    <tr>
                        <th>Amount</th>
                        <th>Type</th>
                        <th>Creator</th>
                        <th>Date</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id='viewPaymentsTBody'>
                    <tr>
                        <th>No Payments Have Been Made</th>
                    </tr>
                </tbody>
            </table>
        </div>

        <a class="close-reveal-modal">&#215;</a>
    </div>

    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript">
        var deletePaymentInvoiceID; //used to update Outstanding balance column for invoices with no payments

        jQuery('#form-container > form').submit(function (e) {
            var r = confirm("Are you sure you want to delete @Model.FirstName @Model.LastName");
            if (r === false) {
                e.preventDefault();
            }
        });

        //payment modal
        $("#paymentDate").kendoDatePicker({
            animation: {
                open: {
                    effects: "fadeIn",
                    duration: 300,
                    show: true
                }
            },
            value: new Date(Date.now())
        });

        $("#paymentType").kendoComboBox({
            dataTextField: "type",
            dataValueField: "type",
            dataSource: new kendo.data.DataSource({
                transport: {
                    read: "/Invoice/GetPaymentTypesJson"
                }
            })
        });

        $('.viewPaymentsBtn').click(function () {
            $("#view-pay-evt-title").html($(this).data("event-name"));

            var invoiceID = $(this).data('invoice-id');
            var jsonURL = '/Invoice/GetPaymentsJson/' + invoiceID;

            $.getJSON(jsonURL, function (data) {
                populateViewPayments(data);
            });

        });

        function onDeletePaymentClicked(sender) {
            var r = confirm("Are you sure you want to delete the payment");
            if (r === true) {
                var paymentID = $(sender).data("payment-id");
                var postURL = "/Invoice/DeletePayment/" + paymentID;
                deletePaymentInvoiceID = $(sender).data("invoice-id");

                $.post(postURL, function (data) {
                    populateViewPayments(data);
                    updateInvoiceTotalColumn(deletePaymentInvoiceID);
                    if (data.length < 1) {
                        $('#view-payments').trigger('reveal:close'); //close dlg if last payment deleted
                    }
                });
            }
        }

        function updateInvoiceTotalColumn(invoiceID) {
            var getURL = "/Invoice/GetInvoiceTotalJson/" + invoiceID;
            $.getJSON(getURL, function (data) {
                var totalColumn = document.getElementById("inv-total-" + invoiceID);
                totalColumn.innerHTML = data.total;
            });
        }

        function populateViewPayments(data) {
            var html = "";
            $(data).each(function (i, obj) {
                html += "<tr>";
                html += "<td>" + obj.Amount + "</td>";
                html += "<td>" + obj.PaymentType + "</td>";
                html += "<td>" + obj.Creator + "</td>";
                html += "<td>" + obj.Date + "</td>";
                html += "<td><a href='#' data-invoice-id='" + obj.InvoiceID + "' data-payment-id='" + obj.PaymentID + "' class='k-button k-button-icontext deletePaymentBtn'>Delete</a></td>";
                html += "</tr>";
            });

            $('#viewPaymentsTBody').html(html);
            $('.deletePaymentBtn').click(function () {
                onDeletePaymentClicked($(this));
            });
        }

        $('.addPaymentBtn').click(function () {
            var invoiceID = $(this).data("invoice-id");
            document.getElementById("invoice-id-hdn").value = invoiceID;

            var clientID = $(this).data("client-id");
            document.getElementById("client-id-hdn").value = clientID;

            $('#modal-event-name').html($(this).data('event-name'));
        });

    </script>

}